Размеры сайта для разных разрешений

[Visage]

Доброго времени суток. Я уже чуть чуть знаю html\css, но считаю, что мой вопрос ближе к новичковому вопросу.

Обычно сайт оптимизируют под какое то разрешение, например я свой сайт оптимизировал для 1024х768. В этом случае, если просматривать его при большем разрешении, то по краям получаются пустые полоски. Просматривая другие сайты я увидел, что они как то растягиваются по ширине. Например этот же форум. Он без проблем растягивается в ширину и всегда на полный экран. Я понимаю, что этот форум написан не на html, а php, но я думаю, что и простые пхп странички можно сделать таким же образом.

Наверное это нереально сделать с центрируемой шапкой...

Edited January 29, 2009 by Visage

[Victor Ananiev]

блин, PHP генерирует тот же HTML!! весь фокус в стилях:

width:100%; и все тянется)

Edited January 29, 2009 by Victor Ananiev

[woofs]

Но стоить заметить что под "тянучку", не всякий жесткий дизайн пойдет, как правило там repeat.

[Visage]

блин, PHP генерирует тот же HTML!! весь фокус в стилях:

width:100%; и все тянется)

Ага, я читал, что php генерирует html

Спасибо!

Но стоить заметить что под "тянучку", не всякий жесткий дизайн пойдет, как правило там repeat.

Спасибо, начал немного представлять, что одному коду не вытянуть резиновый дизайн из жесткого

Если я верно понял, то из такого дизайна не сделать резиновый >>> ссылка

[woofs]

Из этого можно, если Верстаешь с шаблона PSD(ну с любого формата где слои), то сделать впринципе не сложно)

Edited January 29, 2009 by woofs

[Visage]

Из этого можно, если Верстаешь с шаблона PSD(ну с любого формата где слои), то сделать впринципе не сложно)

Аааа... что-то не представляю как при этом будет шапка по краям выглядеть ) и кнопки я делал картой на картинке, ибо замучался всячески делать с помощью CSS =( Кнопки кривые, не получается чтобы он заходили друг на друга. Возился дня 2, пока не сделал картой. Думаю, что если делать резиновый, то карта поедет, нет?

[woofs]

все элементарно, с помощью css и слоями кнопки, и хедер по другому будут делаться, там ничего заковыристого нет, в хедере будет задний слой который будет размножаться на него лягут доги и текст.... просто верстка по другому будет, и карта не понадобится, кнопки думаю сложно тоже нк будет, надо правильно порезать и всё

и красивее

Edited January 29, 2009 by woofs

[Visage]

все элементарно, с помощью css и слоями кнопки, и хедер по другому будут делаться, там ничего заковыристого нет, в хедере будет задний слой который будет размножаться на него лягут доги и текст.... просто верстка по другому будет, и карта не понадобится, кнопки думаю сложно тоже нк будет, надо правильно порезать и всё

и красивее

К сожалению моих знаний html\css не хватает, чтобы представить как это делать\как выглядит =( Со слоями не работал вообще. Только блочная вёрстка

[woofs]

блочная и есть слоями, там еще position...

блочная и есть слоями, там еще position...

в простанародии и div'ная

[Visage]

блочная и есть слоями, там еще position...

в простанародии и div'ная

шапка будет что-то типа... ммм... repeat-x? Честно пока в упор не представляю =( стыдно аж стало

[Vlad]

Для примера берем сайт http://liondesert.ru

Вверху две картинки используется:

градиент, повторяется по горизонтали (это и есть repeat-x)

http://liondesert.ru/images/header-bg1.png

картинка с животными

http://liondesert.ru/images/header-bg2.png

Второй рисунок тоже повторяется по горизонтали, но сама картинка довольно широкая (~1300px), поэтому эффект повторения будет заметен только при больших разрешениях монитора.

Сверху на фоновые рисунки ложится заголовок сайта в виде <img>. Вот и получается, что при любом разрешении фон будет либо обрезаться по краям, либо повторяться.

[woofs]

А меню картой делать и не стоит, можно прям в самом (без изображений) , сделать через ul li меню, если нестыковка в отступах то я такой вопрос задовал можно на форуме почитать

[Visage]

Для примера берем сайт http://liondesert.ru

Вверху две картинки используется:

градиент, повторяется по горизонтали (это и есть repeat-x)

http://liondesert.ru/images/header-bg1.png

картинка с животными

http://liondesert.ru/images/header-bg2.png

Второй рисунок тоже повторяется по горизонтали, но сама картинка довольно широкая (~1300px), поэтому эффект повторения будет заметен только при больших разрешениях монитора.

Сверху на фоновые рисунки ложится заголовок сайта в виде <img>. Вот и получается, что при любом разрешении фон будет либо обрезаться по краям, либо повторяться.

Во теперь примерно понял как это делать. Только у меня будет что-то вроде фон неба, звёздочки, неповторяющиеся собаки и картинкой название сайта. Спасибо большое!

А меню картой делать и не стоит, можно прям в самом (без изображений) , сделать через ul li меню, если нестыковка в отступах то я такой вопрос задовал можно на форуме почитать

Так у меня идёт наложение кнопок на кнопку.

С ul li у меня получается только так:

Пробовал по всякому, брал готовые меню (собственно на этом и остановился в итоге). Но ещё при этом тяжело работать с текстом внутри этих кнопок.

.menu5 {display:table; padding: 50px 0px 0 0px; margin: 0px 15px 0px 0px; list-style: none none; height:45px; white-space:nowrap; position:relative; font-size:14px;}

.menu5 li {float:left; height:45px; margin-right:0px; list-style: none; }

.menu5 li a {display:block; float:left; height:45px; line-height: 45px; color:#333; text-decoration:none; font-family:arial, verdana, sans-serif; font-weight:bold; text-align:center; padding:0 0 0 43px; cursor:pointer; background:url(images/pro_six_0a.jpg) no-repeat; list-style: none; letter-spacing: 0; text-indent: 0; vertical-align: text-bottom; word-spacing: normal; }

.menu5 li a b {float:left; display:block; padding: 0 41px 5px 0px; background:url(images/pro_six_0b.jpg) no-repeat right top; list-style: none; }

Это CSS код меню, которые взял с одного сайта (там был пак менюшек).

<ul class="menu5">

<ul>

<li><a href="#nogo"><b>Главная</b></a></li>

<li><a href="#nogo"><b>Наши собаки</b></a></li>

<li><a href="#nogo"><b>Выставки</b></a></li>

<li><a href="#nogo"><b>Щенки</b></a></li>

<li><a href="#nogo"><b>Фотогалерея</b></a></li>

<li><a href="#nogo"><b>Контакты</b></a></li>

</ul>

</ul>

Код в html. Было более менее, но потребовалось добавить надписи на английском, поэтому применил способ с картой.

Edited January 30, 2009 by Visage